<br />
<h2 class="smallTitle">员工请假记录</h2>
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">记录编号</th>
      <th scope="col">员工ID</th>
      <th scope="col">姓名</th>
      <th scope="col">请假时间</th>
      <th scope="col">类型</th>
      <th scope="col">原因</th>
      <th scope="col">状态</th>
    </tr>
  </thead>
  <tbody *ngFor="let hero of heroes"
  [class.selected]="hero === selectedHero"
  (click)="onSelect(hero)">
    <tr>
      <th scope="row">{{hero.id}}</th>
      <td>{{hero.staffid}}</td>
      <td>{{hero.name}}</td>
      <td>{{hero.begintime}} - {{hero.endtime}}</td>
      <td>{{hero.category}}</td>
      <td>{{hero.reason}}</td>
      <td>{{hero.state}}</td>
    </tr>
  </tbody>
</table>
 
<div *ngIf="selectedHero">
 
  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>
  
 
</div>
